/**
 * 封装概况
 */
import React from 'react';
import { Row, Col, Tabs, Avatar, List, Card,Form,Select,Modal,DatePicker,Button } from 'antd';
const TabPane = Tabs.TabPane;
const { Meta } = Card
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
// 引入Cookie
// import Cookie from 'js-cookie'
// 引入异步请求
// import { request } from 'config/request'
import { queryList } from './overviewServ'

import styles from './index.less'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);
// 导入项目全局配置文件
import config, { listConfig } from 'config/config'
const FormItem = Form.Item
const Option = Select.Option;
// const confirm = Modal.confirm;
const { MonthPicker, RangePicker } = DatePicker
import moment from 'moment'

// console.log(FormItem)
import ReactEcharts from 'echarts-for-react';
import ListPage from 'widget/PageTmpl/ListPage'
class Origin extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      queryList: [],
      tableQuery: {
        startDate: moment().subtract(1,"months").format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      },
    }
  }
  //完成：正在被重新渲染，状态已变化
  componentDidUpdate(prevProps, prevState) {
  }
  componentWillReceiveProps(nextProps) {

  }
  componentDidMount() {
    let params={}
    this.getList(params);
    // console.log(this.state)
  }
  componentWillUnmount() {

  }
  async getList(payload) {
    const _this = this
    let {success,rows} = await queryList(payload)
    // console.log(rows)
    if(success){
      _this.setState({
        queryList:rows
      });
      // console.log(this.state)
    }
    // this.state.list=rows
    // console.log(List)
    console.log('请求示例')
    //接口请求示例
    // return request({
    //   url: `admin/agent/list`,
    //   method: 'POST',
    //   data: {},
    //   headers: '',
    //   app: ''
    // }).then((result) => {
    //   let { rows } = result
    //   this.state.List = rows
    // })
  }



  render() {
    console.log('render')
    const { getFieldDecorator } = this.props.form
    let { tableQuery } = this.state
   

    // let pieOption = {
    //     // color:['#B9D3EE','0877FD'],
    //     tooltip: {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b}: {c} ({d}%)"
    //     },
    //     // legend: {
    //     //     orient: 'vertical',
    //     //     x: 'left',
    //     //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    //     // },
    //     title: {
    //         text: '性别分布',
    //         // subtext: '访问来源'
    //     },
    //     series: [
    //         {
    //             name:'性别分布',
    //             type:'pie',
    //             radius: ['50%', '70%'],
    //             avoidLabelOverlap: false,
    //             selectedMode: 'single',
    //             label: {
    //                 normal: {
    //                     show: false,
    //                     position: 'center',
                         
    //                 },
    //                 emphasis: {
    //                     show: true,
                         
    //                     textStyle: {
    //                         fontSize: '30',
    //                         fontWeight: 'bold'
    //                     }
    //                 }
    //             },
    //             labelLine: {
    //                 normal: {
    //                     show: false,
    //                      padding: [2, 4],
    //                 }
    //             },
    //             data:[
    //                 {value:310, name:'女'},
    //                 {value:335, name:'男'},
                   
    //             ]
    //         }
    //     ]
    // };

    let barOption1 = {
        title: {
            text: '整体来源分布',
            // subtext: '数据来自网络'
        },
        color: ['#0877FD'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['任务栏-最近使用', '小程序历史列表', '其他', '搜索','公众号菜单','任务栏-我的小程序','会话'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'年龄分布',
                type:'bar',
                barWidth: '60%',
                data:[8, 7, 2, 1,20,25,6 ]
            }
        ]
    };


    let option= {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
        //   data: ['领取人数', '转赠人数', '核销人数'],
          // x: 'center',
          // y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
        //   type: 'value',
        //   name: '月份',
          // boundaryGap: false,
          data: ['2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02']
          // data: monthList
        },
        yAxis: {
          type: 'value',
          name: '人数'
        },
        series: [
          {
            name: '打开次数',
            type: 'line',
            // stack: '总量',
            data: [2, 1, 3, 4, 6,7, 1],
            // data: receiveNum
            color: '#0877FD',
            // areaStyle: { normal: {} },//折线背影
          },
          {
          	name: '访问人数',
          	type: 'line',
          	// stack: '总量',
              data: [5, 6, 1, 2, 1, 3, 8],
              color: 'red',
          	// data: transferNum
          },
        //   {
        //   	name: '核销人数',
        //   	type: 'line',
        //   	// stack: '总量',
        //   	data: [150, 232, 201, 154, 190, 330, 410]
        //   	// data: checkerNum
        //   }
        ]
      };
    
    const CardInfo = ({ month, week, day }) => (
      <div className={cx('cardInfo')}>
        <div>
          <span>月</span>
          <span className={cx('ml10')}>{month}</span>
        </div>
        <div>
          <span>周</span>
          <span className={cx('ml10')}>{week}</span>
        </div>
        <div>
          <span>天</span>
          <span className={cx('ml10')}>{day}</span>
        </div>
      </div>
    );
    
    let pageProps = {
      // ---------- 界面部分 ----------
      "ui": {
        // 页面接口地址
        "api_url": "admin/agent/queryBrokerByMobile",
        // 接口方式
        "method": "POST",
        "app": "",
        // 接口参数
        "params": "pageNo=1&pageSize=10",
        // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
        // "mockData": mockData,
        "mockData": null,
        // 查询栏
        "search_bar": {
          "fields": [
            {
              en_name: 'mobile',
              zh_name: '手机号码',
              elem_type: 'Input',
              elem_valid_type: 'string',
            },
          ],
          searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
            console.log('search click')
          },
          resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
            console.log('reset click')
          },
          searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
            console.log('search finish', params)
          },
          pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
            'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
          ]
        },
        // 数据表格
        "table":
        {
          "status_params": "status=0",
          "status_text": "全部",
          // 表头字段列表
          "scroll": { x: 1000 },
          "fields": [
            {
              "en_name": "name",
              "zh_name": "姓名",
            },
            {
              "en_name": "mobile",
              "zh_name": "手机号",
              width: 130
            },
            {
              "en_name": "gender",
              "zh_name": "性别",
            },
            {
              "en_name": "createTime",
              "zh_name": "创建时间",
            },
          ]
        },
      },
    }


    //   console.log(this.props)
    return (
      <div>
        <CollapsiblePanels>
        <Row>
            {/* <Col span={12}>
                <ReactEcharts option={pieOption} />
            </Col>
            <Col span={12}>
                <ReactEcharts option={barOption1} />
            </Col> */}
            <ReactEcharts option={barOption1} />
        </Row>
        </CollapsiblePanels>

        <CollapsiblePanels>
            <Row>
             <ReactEcharts option={option} />
            </Row>
        </CollapsiblePanels>

        <CollapsiblePanels title={'页面访问数据'} hideUpDownBtn={true}>
          <ListPage pageProps={pageProps} />
        </CollapsiblePanels>

      </div>
    )
  }
}


export default Form.create()(Origin)